@color: #193461;
@topH: 60px;
@bottomH: 45px;
@loginW: 372px;
@error: #ff0000;

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#top {
  width: 100%;
  height: @topH;
  border-bottom: 4px solid @color;
  box-sizing: border-box;
  position: relative;
  text-align: right;

  .register-top-span {
    position: absolute;
    margin: 17px;
    left: 6%;
    height: 15px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .logo {
    margin: 15px 6%;
  }

  .icon {
    height: @topH * 0.8;
    position: absolute;
    bottom: -@topH * 0.8 / 2;
    right: 20%;
    background: #ffffff;
    padding: 0 10px;
  }
}

#container {
  width: 100%;
  height: calc(100vh - @topH - @bottomH);
  box-sizing: border-box;

  .navbar {
    width: 60%;
    margin: 0 20%;
    padding: 90px 90px 16px;
    .navbar-div {
      display: inline;
      margin: 0 6%;
      padding: 20px 0;
      width: 81px;
      height: 20px;
      font-size: 16px;
      position: relative;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      .nav{
        display: inline-block;
        margin: 0 15px 0 0;
        width: 28px;
        height: 28px;
        color: rgba(255, 255, 255, 1);
        font-size: 18px;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        text-align: center;
        background: #00B0F0;
        border-radius: 50%;
      }
      .hr1{
        display: inline;
        position: absolute;
        bottom:0;
        left: 0;
        margin-top: 10px;
        width:148px;
        height:2px;
        background:#00B0F0;
      }
    }
    .gray{
      color:rgba(153,153,153,1);
      .nav-gray{
        background:rgba(229,229,229,1);
      }
    }
  }


  .hr2{
    margin: 0 auto;
    width:1240px;
    height:2px;
    background:rgba(204,204,204,1);
  }
}

.submit-btn {
  // width: calc(@loginW - 25px - 25px);
  margin: 0 120px;
  width:106px;
  height:36px;
  color: white;
  background:rgba(0,176,240,1);

  &:hover {
    background: #00b4f6;
  }

  &:active {
    background: #008fc3;
  }
}

.check-tips {
  margin: 20px 120px;

  & > * {
    vertical-align: middle;
  }

  span {
    line-height: 12px;
    font-size: 12px;
  }
}

#bottom {
  width: 100%;
  height: @bottomH;
  border-top: 4px solid @color;
  box-sizing: border-box;
  text-align: center;
  line-height: @bottomH - 4px;
  font-size: 15px;
}

/* 提示框*/
#msg-box {
  display: none;
  position: absolute;
  right: 10px;
  top: 10px;

  .content {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 6px 1px #00000040;
    width: 250px;
    padding: 15px 15px;

    .title {
      font-size: 17px;
      font-weight: bold;
    }

    .tips {
      font-size: 15px;
      padding-left: 20px;
      padding-top: 10px;
    }
  }

  &.error .title {
    color: @error;
  }
}

#register-box {
  text-align: center;

  form {
    margin-top: 30px;
    display: inline-block;
    text-align: left;
  }

  .input-box {
    margin: 10px 0;

    .label {
      font-size: 14px;
      min-width: 120px;
      display: inline-block;
    }

    input {
      width:320px;
      height:36px;
      border: 1px solid #cfcfcf;
      line-height: 36px;
      padding: 0 10px;
    }
    .input-gray{
      background:rgba(241,241,241,1);
    }
  }

  .register-msg {
    height: 500px;
    line-height: 200px;
    font-size: 20px;
    font-weight: bold;
    display: none;

    .btn {
      color: #003cc3;
      cursor: pointer;
    }
  }
}

.required {
  color: #ff0000;
}
